<template>
  <div v-loading="loading">
    <avue-form ref="form" :option="option" v-model="form">
      <template slot="attachments">
        <easy-upload style="display: inline" :drag="false" v-model="form.attachments" :view-with-count="true" />
      </template>
    </avue-form>
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <el-descriptions :column="3" border size="medium" labelStyle="width:130px;text-align:right;">
          <el-descriptions-item label="供应商名称">{{ supplierInfo.supplierName }} </el-descriptions-item>
          <el-descriptions-item label="供应商简称">{{ supplierInfo.supplierShortName }} </el-descriptions-item>
          <el-descriptions-item label="成立日期">{{ supplierInfo.establishDate }}</el-descriptions-item>
          <el-descriptions-item label="境内外关系">{{ supplierInfo.outbound_dictText }}</el-descriptions-item>
          <el-descriptions-item label="统一社会信用代码" v-if="supplierInfo.outbound === '0'">{{
            supplierInfo.socialCreditCode
          }}</el-descriptions-item>
          <el-descriptions-item label="境外识别码" v-else>{{ supplierInfo.outsideIdentifier }}</el-descriptions-item>
          <el-descriptions-item label="集团名称">{{ supplierInfo.groupName }}</el-descriptions-item>
          <el-descriptions-item label="公司类型">{{ supplierInfo.companyType_dictText }}</el-descriptions-item>
          <el-descriptions-item label="所属行业">{{ supplierInfo.capitalType_dictText }}</el-descriptions-item>
          <el-descriptions-item label="公司网址">{{ supplierInfo.website }}</el-descriptions-item>

          <el-descriptions-item label="区域">{{ supplierInfo.area }}</el-descriptions-item>
          <el-descriptions-item label="注册地址">{{ supplierInfo.registerAddr }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ supplierInfo.contacts }}</el-descriptions-item>
          <el-descriptions-item label="联系人职务">{{ supplierInfo.contactPost }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ supplierInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮件">{{ supplierInfo.email }}</el-descriptions-item>
          <el-descriptions-item label="固定电话">{{ supplierInfo.telephone }}</el-descriptions-item>
          <el-descriptions-item label="厂房面积">{{ supplierInfo.plantArea }}</el-descriptions-item>
          <el-descriptions-item label="总人数">{{ supplierInfo.totalNumber }}</el-descriptions-item>
          <el-descriptions-item label="经营范围" :span="3">{{ supplierInfo.busScope }}</el-descriptions-item>
          <el-descriptions-item label="公司简介">{{ supplierInfo.companyProfile }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="联系人信息">
        <contacts-info ref="contacts" />
      </el-tab-pane>
      <el-tab-pane label="财务信息">
        <finance-info ref="finance" />
      </el-tab-pane>
      <el-tab-pane label="资质信息">
        <qualifications-info ref="qualifications" />
      </el-tab-pane>
      <el-tab-pane label="工程/产品信息"> <factory-info ref="factory" /></el-tab-pane>
      <el-tab-pane label="设备/物流信息"> <equipment-info ref="equipment" /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { option } from '@/option/tenant/supplier/recommend-form'
import { getByInstId } from '@/api/supplier/recommend'

import ContactsInfo from '@/views/tenant/supplier/info/components/contacts-info'
import EquipmentInfo from '@/views/tenant/supplier/info/components/equipment-info'
import FactoryInfo from '@/views/tenant/supplier/info/components/factory-info'
import FinanceInfo from '@/views/tenant/supplier/info/components/finance-info'
import QualificationsInfo from '@/views/tenant/supplier/info/components/qualifications-info'

export default {
  name: 'RecommendApprove',
  props: ['type', 'processInsId'],
  components: { ContactsInfo, EquipmentInfo, FactoryInfo, FinanceInfo, QualificationsInfo },
  data() {
    return {
      form: {
        attachments: []
      },
      option: option.call(this),
      loading: false,
      supplierInfo: {},
      supplierOption: {
        labelWidth: 120,
        emptyBtn: false,
        submitBtn: false,
        detail: true,
        column: [
          {
            label: '申请编号',
            span: 8,
            prop: 'applyCode',
            maxlength: 100,
            disabled: true
          }
        ]
      }
    }
  },
  mounted() {
    this.getDetail(this.processInsId)
  },
  methods: {
    async getDetail(processInsId) {
      this.loading = true
      if (this.processInsId) {
        await getByInstId(processInsId).then(res => {
          this.form = res.data.data
          this.supplierInfo = this.form.supplierInfoVO

          this.$refs.contacts.contactList = this.form.supplierInfoVO.contactList
          this.$refs.contacts.staffList = this.form.supplierInfoVO.staffList
          this.$refs.finance.financeList = this.form.supplierInfoVO.financeList
          this.$refs.finance.bankList = this.form.supplierInfoVO.bankList
          this.$refs.qualifications.data = this.form.supplierInfoVO.qualificationsList
          this.$refs.factory.factoryList = this.form.supplierInfoVO.factoryList
          this.$refs.factory.productList = this.form.supplierInfoVO.productList
          this.$refs.factory.customerList = this.form.supplierInfoVO.customerList
          this.$refs.factory.materialList = this.form.supplierInfoVO.materialList
          this.$refs.equipment.equipmentList = this.form.supplierInfoVO.equipmentList
          this.$refs.equipment.logisticsList = this.form.supplierInfoVO.logisticsList
        })
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
